<template>
  <div class="textConnect">
    <div class="searchIP">
      <el-input v-model="searchIP" placeholder="搜索IP"></el-input>
    </div>
    <div class="textLable">
      <template v-for="item in tableColumnsFn">
        <el-tooltip
          class="item"
          effect="light"
          placement="bottom"
          :key="item.MONID"
          v-if="showMode == 'icon'"
        >
          <div slot="content" style="text-align: center">
            <span style="color: #409eff; line-height: 16px">{{ item.IP }}</span>
            <br />
            <el-tag
              type="info"
              class="dialogOpenButton"
              @click="handleCommand(item)"
              >详细</el-tag
            >
          </div>
          <el-button
            class="iconButton"
            :class="{ selected: item.selected }"
            type="primary"
            size="mini"
            @click="dbClick(item)"
          >
            <i
              class="el-icon-jk-fuwuqi1"
              :class="chooseColor(item.MAX_ALERTLEVEL)"
            ></i>
          </el-button>
        </el-tooltip>
        <el-button
          class="iconButton"
          :class="{ selected: item.selected }"
          :key="item.MONID"
          type="primary"
          size="mini"
          @click="dbClick(item)"
          v-if="showMode == 'text'"
        >
          <i :class="chooseColor(item.MAX_ALERTLEVEL)">{{ item.IP }}</i>
        </el-button>
      </template>
    </div>
  </div>
</template>

<script>
import { fetchData } from "@/api/index.js";
import bus from "common/bus.js";
import { UpdateItem, GetItem, DeleteItem, AddItem } from "@/utils/dataStore";

export default {
  data() {
    return {
      showMode: "icon",
      postData: {
        opera: "hostconnect",
        curPage: 1,
        pageSize: 2000,
        sort: {
          sortColumn: "monid",
          sortOrders: "asc",
        },
        filtersType: "exclude",
        filters: {
          os_type: "Network",
        },
      },
      tableColumns: [],
      TextServer: {},
      searchIP: "",
      selectedIP: "",
      selectedOSMonID: "",
      timerName: "TextServer",
      timerEventName: "timerTextServer",
      timerInterval: 1000 * 30,
    };
  },
  created() {
    this.init();

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.getData();
        this.chooseColor();
      }
    });

    bus.$on("showText", (msg) => {
      this.showMode = msg;
    });
  },
  mounted() {},
  computed: {
    tableColumnsFn() {
      return this.tableColumns.filter((d) => {
        if (d.IP.includes(this.searchIP)) {
          d["selected"] = false;
          if (d.MONID == this.selectedOSMonID) {
            d["selected"] = true;
          }

          return d;
        }
      });
    },
  },
  methods: {
    init() {
      fetchData({
        postData: JSON.stringify(this.postData),
      }).then((res) => {
        this.tableColumns = res.data;

        // 初始化时，选中第一个节点
        if (this.tableColumns.length > 0) {
          this.dbClickFirst();
        }
      });
    },
    getData() {
      fetchData({
        postData: JSON.stringify(this.postData),
      }).then((res) => {
        this.tableColumns = res.data;
      });
    },
    dbClick(item) {
      this.selectedOSMonID = item.MONID;
      this.selectedIP = item.IP;

      this.$emit("clickMonID", {
        selectedIP: this.selectedIP,
        selectedOSMonID: this.selectedOSMonID,
      });
    },
    async dbClickFirst() {
      let dexieData;
      await GetItem(sessionStorage.getItem("PushId")).then(
        (_) => (dexieData = _)
      );
      if (this.$route.params.MONID) {
        let params = this.$route.params;
        let Item = this.tableColumns.filter((item) => {
          return item.MONID == params.MONID;
        });
        this.dbClick(...Item);
      } else if (dexieData.length > 0) {
        let params = dexieData[0].articleAddress;
        let Item = this.tableColumns.filter((item) => {
          return item.MONID == params.MONID;
        });
        this.dbClick(...Item);
      } else {
        this.dbClick(this.tableColumns[0]);
      }
      // this.dbClick(this.tableColumns[0]);
    },
    chooseColor(maxAlertLevel) {
      let _class = "";

      switch (maxAlertLevel) {
        case 3:
          _class = "iconColor3";
          break;
        case 2:
          _class = "iconColor2";
          break;

        default:
          _class = "iconColor1";
          break;
      }

      return _class;
    },
    handleCommand(item) {
      this.$router.push({
        name: "ItemMonitorServerConnect",
        params: {
          MONID: item.MONID,
          IP: item.IP,
          ITEM: item,
        },
      });
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
    DeleteItem(Number(sessionStorage.getItem('PushId'))).then(_=> {
    }).catch(e => {
      console.log(e)
    })
    sessionStorage.clear('PushId')
    window.close()
  },
  watch: {},
};
</script>

<style scoped>
.textConnect > div {
  margin-bottom: 8px;
}
.textConnect > div:last-child {
  margin-bottom: 0;
}
.textLable .iconButton {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  margin: 0 1px 5px;
}
.textLable .iconButton:hover {
  border-color: rgba(64, 158, 255, 0.6);
}
.textLable .iconButton.selected {
  background-color: rgba(64, 158, 255, 0.6);
}
.textConnect >>> .el-button--mini,
.el-button--small {
  font-size: 26px !important;
}
.iconColor1 {
  color: #67c23a;
}
.iconColor2 {
  color: #e6a23c;
}
.iconColor3 {
  color: #f56c6c;
}
.dialogOpenButton {
  cursor: pointer;
}
.textLable {
  max-height: calc(80vh / var(--zoom));
  overflow-y: scroll;
}
.textLable::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.textLable::-webkit-scrollbar-thumb {
  background-color: rgba(4, 44, 119, 0.7);
  border-radius: 3px;
}
</style>    